<template>
  <el-dialog title="选择人脸识别设备" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false" :before-close="close">
    <div>
      <el-form ref="RefForm" :model="ruleForm" label-width="120px" :rules="formRules" :validate-on-rule-change="false" status-icon>
        <el-form-item label="人脸识别设备" class="wid" prop="faceDetectIp">
          <el-select v-model="ruleForm.faceDetectIp" placeholder="请选择">
            <el-option v-for="item in faceDetectAry" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button :loading="loadingSubmit" type="primary" @click="submitHandler">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  // import dialogEditMixin from '@/mixins/dialogEdit'
  // import { eleValidator } from '@/utils/tools'
  import { faceDetectSetting, faceDetect, SyncFaceDetectData } from '@/api/api'
  export default {
    // mixins: [dialogEditMixin],
    data() {
      return {
        loadingSubmit: false,
        dialogVisible: false,
        name: '',
        ruleForm: {
          faceDetectIp: ''
        },
        faceDetectAry: [],
        formRules: {
          faceDetectIp: [{ required: true, message: '请选择人脸识别设备', trigger: 'change' }]
        }
      }
    },
    methods: {
      open(value) {
        this.dialogVisible = true
        this.name = value
        this.getData()
      },
      resetFormData() {
        this.formData = {
          workCode: '',
          workName: '',
          workType: '',
          workComment: ''
        }
      },
      async getData() {
        try {
          let obj = { pageIndex: 1, pageSize: 1e8 }
          let response = await faceDetectSetting('post', obj, false)
          this.faceDetectAry = []
          this.faceDetectAry = response.data.items.map(item => {
            return {
              label: item.name,
              value: item.id
            }
          })
        } catch (err) {
          this.faceDetectAry = []
        }
      },
      takePhoto() {
        this.loadingSubmit = true
        this.$refs.RefForm.validate(async valid => {
          if (valid) {
            try {
              let response = await faceDetect('post', { name: this.name, faceDeviceId: this.ruleForm.faceDetectIp })
              if (response.code === 200) {
                this.close()
              }
            } catch (err) {
              this.$message.error('设备连接失败！')
            }
            this.loadingSubmit = false
          } else {
            this.loadingSubmit = false
          }
        })
      },
      syncData() {
        this.loadingSubmit = true
        this.$refs.RefForm.validate(async valid => {
          if (valid) {
            try {
              let response = await SyncFaceDetectData('post', { deviceId: this.ruleForm.faceDetectIp })
              if (response.code === 200) {
                this.$message.success(response.data)
                this.close()
              }
            } catch (err) {
              this.$message.error('设备连接失败！')
            }
            this.loadingSubmit = false
          } else {
            this.loadingSubmit = false
          }
        })
      },
      submitHandler() {
        if (this.name == 'sync') {
          this.syncData()
        } else {
          this.takePhoto()
        }
      },
      close() {
        this.faceDetectAry = []
        this.ruleForm.faceDetectIp = ''
        this.dialogVisible = false
        if (this.$refs.RefForm) {
          this.$refs.RefForm.resetFields()
        }
      }
    }
  }
</script>

<style lang="scss" scoped></style>
